<template>
  <a-modal
    :width="800"
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    title="系统设置"
  >
    <a-tabs position="left" v-model="tabType">
      <a-tab-pane :key="1" title="水印设置">
        <a-radio-group v-model="type">
          <a-radio :value="1">默认</a-radio>
          <a-radio :value="2">自定义</a-radio>
          <template v-if="type === 2">
            <div
              style="margin-top: 5px; display: flex; align-items: center"
              v-for="(text, index) in content"
              :key="text"
            >
              <a-input
                style="width: 200px"
                :default-value="text"
                @change="changeText($event, index)"
              ></a-input>
              <icon-plus-circle
                :size="25"
                style="margin: 0 5px; color: #379ce0"
                @click="content.push('')"
              />
              <icon-minus-circle
                :size="25"
                style="color: #e03f2e"
                v-if="index"
                @click="content.pop()"
              />
            </div>
          </template>
        </a-radio-group>
      </a-tab-pane>
      <a-tab-pane :key="2" title="其他设置"> 未开放 </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script setup lang="ts">
const visible = ref(false);
const type = ref(1);
const tabType = ref(1);
const content = reactive(['']);
const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  isOk();
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const changeText = (e: string, index: number) => {
  console.log('changeText', e, index);

  content[index] = e;
};

const isOk = () => {
  switch (tabType.value) {
    case 1:
      localStorage.setItem(
        'watermarkData',
        JSON.stringify({ type: type.value, content })
      );
      break;

    default:
      break;
  }
};

onMounted(() => {
  const watermarkData = JSON.parse(localStorage.getItem('watermarkData') + '');
  if (watermarkData) {
    type.value = watermarkData.type;
    content.length = 0;
    watermarkData.content.forEach((ele: string) => {
      content.push(ele);
    });
  }
});
defineExpose({
  handleClick
});
</script>
<style lang="less" scoped>
:deep(.arco-tabs-pane) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
